<template>
    <div id="en">
        <h3>小黑的书架</h3>
        <ul>
            <li v-for="(item,index) in booksList" :key="item.id">
                <span>{{item.name}}</span>
                <span>{{item.author}}</span>
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        name: "11-vue-v-for",
        data() {
            return {
                booksList: [
                    { id: 1, name: '《红楼梦》', author: '曹雪芹' },
                    { id: 2, name: '《西游记》', author: '吴承恩' },
                    { id: 3, name: '《水浒传》', author: '施耐庵' },
                    { id: 4, name: '《三国志之真三国无双》', author: '罗贯中' }
                ]
            }
        },
        methods: {
            del(id) {
                this.booksList = this.booksList.filter(item => {
                    // return '条件'   最终的结果 就是符合条件的元素
                    return item.id !== id
                })
            }
        }
    }
</script>

<style scoped>

</style>